<div class="page-container" v-cloak>
    <el-card>
        <template #header>
            <div class="breadcrumb">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item>门店列表</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
        </template>
        <div>
            <el-form :inline="true">

                <el-form-item>
                    <el-input v-model="where.store_name" placeholder="名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="where.name" placeholder="联系人"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-link>
                        <el-button type="primary" @click="searchEvent">查询</el-button>
                    </el-link>

                    <el-link v-if="{$add} === 1" href="{:url('admin/store/edit')}">
                        <el-button type="primary">新增</el-button>
                    </el-link>
                    <el-link v-if="{$add} === 0" >
                        <el-button type="warning">升级会员，可新增多家门店</el-button>
                    </el-link>
                </el-form-item>
            </el-form>
        </div>
        <div>
            <el-table

                    :data="data_list"
                    style="width: 100%">
                <el-table-column
                        prop="store_id"
                        label="ID"
                        min-width="80">
                </el-table-column>
                <el-table-column
                        prop="store_name"
                        label="名称"
                        min-width="180">
                </el-table-column>
                <el-table-column
                        prop="name"
                        min-width="180"
                        label="联系人">
                </el-table-column>
                <el-table-column
                        prop="mobile"
                        min-width="180"
                        label="联系电话">
                </el-table-column>
                <el-table-column
                        prop="created_at"
                        width="160"
                        label="创建时间">
                </el-table-column>
                <el-table-column
                        prop="sub_mch_id"
                        width="160"
                        label="商户号">
                </el-table-column>
                <el-table-column label="状态">

                    <template v-slot:default="scope">

                        <!-- 使用 scope.row 来访问当前行的数据 -->

                        <span v-if="scope.row.status === 1" style="color: #529b2e">营业中</span>

                        <span v-else-if="scope.row.status == 2" style="color: #bb8a24">装修中</span>

                        <span v-else>隐藏</span>

                    </template>

                </el-table-column>
                <el-table-column label="门店类型">

                    <template v-slot:default="scope">

                        <!-- 使用 scope.row 来访问当前行的数据 -->

                        <span v-if="scope.row.store_type === 1" style="color: #529b2e">棋牌</span>
                        <span v-else-if="scope.row.store_type == 2" style="color: #bb8a24">KTV</span>
                        <span v-else-if="scope.row.store_type == 3" style="color: #bb8a24">台球</span>
                        <span v-else-if="scope.row.store_type == 4" style="color: #bb8a24">影吧</span>
                        <span v-else>隐藏</span>

                    </template>

                </el-table-column>
                <el-table-column
                        align="center"
                        min-width="180"
                        label="操作">
                    <template #default="{row}">
                        <el-link :href="'{:url('admin/store/edit')}?store_id='+row.store_id">
                            <el-button type="primary">编辑</el-button>
                        </el-link>
                        <!--                        <el-link>-->
                        <!--                            <el-button @click="deleteEvent(row)" type="danger">删除</el-button>-->
                        <!--                        </el-link>-->
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-container">
                <el-pagination
                        background
                        layout="prev, pager, next"
                        :total="total_num"
                        :current-page="current_page"
                        :page-size="per_page"
                        @current-change="currentChangeEvent"
                >
                </el-pagination>
            </div>
        </div>
    </el-card>
</div>

<script>

    const App = {
        data() {
            return {
                is_init_list: true,
                role_list: [],
                where: {},
                //  add:0
            }
        },
        methods: {
            GetList() {
                this.httpGet("{:url('admin/store/index/lists')}", {
                    page: this.current_page,
                    ...this.where
                }).then(res => {
                    console.log(res.data)
                    let {lists = {}, role_list = [], add = {}} = res.data
                    this.role_list = role_list
                    //   this.add = add
                    this.handRes(lists)
                })
            },
            deleteEvent({store_id}) {
                this.$confirm('是否确认删除该管理员？', '提示').then(() => {
                    this.httpDelete("{:url('admin/store/delete')}/" + store_id, {}).then(res => {
                        if (res.status) {
                            this.$message.success(res.msg)
                            this.GetList()
                        }
                    })
                }).catch(err => {
                })
            },
            searchEvent() {
                this.GetList()
            }
        }
    }
</script>